<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset=utf-8 http-equiv="Content-Language" content="en"/>
 <title>Setup</title>
 
 <!--
 (this applies to the tab library CSS)
 
Copyright (c) 2017 by Kseso (https://codepen.io/Kseso/pen/JDFto)

Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
of the Software, and to permit persons to whom the Software is furnished to do
so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
-->

<style type="text/css">
*, *:after, *:before {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}
* {margin:0;padding:0;border: 0 none;position: relative;}


section {
  background: rgba(48,166,67,.5);
  width: 80vw;
  max-width: 50rem;
  min-width: 390px;
  height: 66rem;
  margin: 0rem auto;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
}
article {
  position: absolute;
  left: 0;
  top: 150px;
  right: 0;
  bottom: 0;
  padding: 1rem 1rem 0;
  overflow: auto;
  transition: .5s;
  transform: scale(0);
  transform-origin: center center;
  transition-delay: .1s;
}
article:before {
  color: rgba(0,0,0,.2);
  font-size: 4rem;
  font-weight: 100;
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
h2 {
  font-size: 2.5rem;
  font-weight: 600;
  text-align: center;
  color: rgba(0,0,0,.6);
}
body > h2 {height: auto;}
h2 img {
  width: 120px;
  height: auto;
  background: #f9f9f9;
  border: 5px solid rgba(0,0,0,.7);
  border-radius: 50%;
  padding: 5px;
  display: block;
  margin: 0 auto;
  box-shadow: 0 0 7px rgba(0,0,0,.5);
}
h2 span {
  font-family: Great Vibes;
  font-weight: 400;
  display: block;
  margin-bottom: 1rem;
}
footer ul {
  width: 100%;
  color: #037B49;
}
footer li {
  list-style-type: none;
  float: left;
  width: 20%;
  text-align: center;
  font-size: 3rem;
  font-weight: 100;  
}
p, dl, ol {
  line-height: 1.5;
  font-size: 1.3rem;
}
ol li {margin: 0 0 .5rem 1rem;}
dt {
  font-size: 1.6rem;
  font-weight: 600;
  text-indent: 1.5rem;
}
nav {
  background: rgba(30,103,67,.5);
  width: 100%;
  height: 150px;
  text-align: center;
  box-shadow: 0 0 6px rgba(0,0,0,.4);
}
nav:after {
  content:'';
  width: 25%;
  height: 150px;
  background: rgba(248,246,167,.4);
  position: absolute;
  transition: .5s;
}

label {
  width: 25%;
  float: left;
  color: rgba(48,166,67,.5);
  text-align: center;
  cursor: pointer;
  transition: .5s;
  z-index: 2;
    -webkit-filter: blur(2px); 
  filter: blur(2px); 
}
label:hover {color: #1E6743;}
label:before {
  display: block;
  font-size: 3rem;
  line-height: 5rem;
    text-align: center;
  z-index: 2;
}
#wireless:checked ~ nav [for='wireless'],
#certs:checked ~ nav [for='certs'],
#settings:checked ~ nav [for='settings'],
#updates:checked ~ nav [for='updates'] {
  color: rgba(30,103,67,.5);
  font-weight: 600;
  -webkit-filter: blur(0px); 
  filter: blur(0px); 
}
#wireless:checked ~ nav [for='wireless'] {}
#certs:checked ~ nav [for='certs'] {}
#settings:checked ~ nav [for='settings'] {}

#wireless:checked ~ nav:after {
  left: 0;
}
#certs:checked ~ nav:after {
  left: 25%;
}
#settings:checked ~ nav:after {
  left:50%;
  border-top: 0 none;
}
#updates:checked ~ nav:after {
  left: 75%;
}

</style>

<!-- Assumed Public Domain from Patrick Atoon and others
via https://stackoverflow.com/questions/5213753/build-step-progress-bar-css-and-jquery
 -->

<style type="text/css">

/* Progress Tracker v2 */
ol.progress[data-steps="2"] li { width: 49%; }
ol.progress[data-steps="3"] li { width: 33%; }
ol.progress[data-steps="4"] li { width: 24%; }
ol.progress[data-steps="5"] li { width: 19%; }
ol.progress[data-steps="6"] li { width: 16%; }
ol.progress[data-steps="7"] li { width: 14%; }
ol.progress[data-steps="8"] li { width: 12%; }
ol.progress[data-steps="9"] li { width: 8%; }

.progress {
    width: 100%;
    list-style: none;
    list-style-image: none;
    margin: 10px 0 10px 0;
    padding: 0;
          transition: .5s;
  transition-delay: .1s;
}

.progress li {
    float: left;
    text-align: center;
    position: relative;
}

.progress .name {
    display: block;
    vertical-align: bottom;
    text-align: center;
    margin-bottom: 1em;
    color: black;
    font-size:10pt; font-weight:bold;
    opacity: 0.3;
}

.progress .step {
    color: black;
    border: 3px solid rgba(30,103,67,.5);
    background-color: rgba(30,103,67,1);
    border-radius: 50%;
    line-height: 1.6;
    width: 2em;
    height: 2em;
     font-size:16pt;
    display: inline-block;
        position: relative;
    z-index: 2;
}

.progress .step span {
    opacity: 0.3;
}

.progress .active .name,
.progress .active .step span {
 font-weight:bold;
    opacity: 1;
}

.progress .fail .name,
.progress .fail .step
 span {
 font-weight:bold;
 color: white;
    opacity: 1;
}

.progress .step:before {
    content: "";
    display: block;
    background-color: rgba(30,103,67,1);
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 0.6em;
    left: -1em;
    z-index: -3;
}

.progress .step:after {
    content: "";
    display: block;
    background-color: rgba(30,103,67,1);
    height: 0.4em;
    width: 50%;
    position: absolute;
    bottom: 0.6em;
    right: -1em;
    z-index: -3;
}

.progress li:first-of-type .step:before {
    display: none;
}

.progress li:last-of-type .step:after {
    display: none;
}

.progress .done .step,
.progress .done .step:before,
.progress .done .step:after {
    background-color: rgba(50,150,50,1);
    color: white;
}

.progress .active .step,
.progress .active .step:before {
    background-color: rgba(248,248,230,1);
}

.progress .fail .step,
.progress .fail .step:before {
    background-color: rgba(248,24,24,1);
    color: white;
    opacity: 1;
}

.progress .done .step {
    border: 3px solid rgba(24,24,16,1);
}
.progress .active .step {
    border: 3px solid rgba(248,246,167,1);
}
.progress .fail .step {
    border: 3px solid rgba(208,24,16,1);
        color: white;
    opacity: 1;
}
</style>


<style type="text/css">
#wireless:checked ~ .page1,
#certs:checked ~ .page2,
#settings:checked ~ .page3,
#updates:checked ~ .page4 {
  display: block;
  transform: scale(1);
  transition-delay: .5s; 
}
a {color: rgba(0,0,0,.4)}
a:hover {color: rgba(0,0,0,.2)}

@font-face {
	font-family: imprima;
	src: url(./Gudea-Regular.ttf)
}
 
th,td { font-family: imprima; padding: 5px; }
.td-right { text-align: right; }
.td-left { text-align: left; }
.td-center { text-align: center; }
.td-top { vertical-align: top; }
.td-middle { vertical-align: middle; }
.td-bottom { vertical-align: bottom; }
.center-align { text-align: center; }
.center-div { margin-left: auto; margin-right: auto; }
.right-div { margin-left: auto; margin-right: 0; }
.left-div { margin-left: 0; margin-right: auto; }
td.bigt { font-size:40pt; font-weight:normal; text-align:left; color:#000000; }
td.stt { font-size:14pt; font-weight:bold; text-align:center; color:#ffffc0; }
td.scc { font-size:10pt; font-weight:normal; text-align:center; color:#404040;  background-color: rgba(240, 240, 240, 0.6); }
td.scd { font-size:10pt; font-weight:normal; text-align:center; color:#404040;  background-color: rgba(240, 240, 240, 0.3); }
tdmin { font-size:9pt; font-weight:normal; text-align:center; color:#404040; } 
td.l { background-color: rgba(40, 40, 24, 0.6); color:#c0c0c0; }
tr.ra { background-color: rgba(240, 240, 224, 0.6); color:#303030; text-align:left; }
tr.ras { background-color: rgba(255, 255, 255, 0.8); color:#101010; text-align:left; }
tr.rl { }
.sub { font-size:24pt; font-weight:normal; text-align:center; color:#000000; }
.tabt { font-size:12pt; font-weight:bold; text-align:center; color:#ffffc0; }
.tabv { font-size:12pt; font-weight:normal; text-align:center; color:#000000; }
.it { font-size:14pt; font-weight:bold; text-align:right; color:#404040; }
.itt { font-size:10pt; font-weight:bold; text-align:right; color:#404040; padding: 0px}
.iv { font-size:14pt; font-weight:normal; text-align:left; color:#000000; }
.ivt { font-size:10pt; font-weight:normal; text-align:left; color:#000000; padding: 0px}
.rivt { font-size:11pt; font-weight:normal; text-align:left; color:#e0e000; padding: 1px; margin: 0px; left: 5px}
.riv { font-size:11pt; font-weight:normal; text-align:left; color:#f0f0f0; padding: 1px; margin: 0px; left: 5px}
.inp { font-size:15pt; padding: 4px}

.tabtit { font-family: imprima; font-size:18pt; font-weight:normal; text-align:left; color:#e0ffe0; padding: 0px}

.btn { font-size:13pt; font-weight:normal; text-align:center; color:#000000; padding: 5px}
.btn:hover {color: #000; background-color: #fff}
.group2 { font-family: imprima; vertical-align:middle;
	text-align:center;
	background-color: rgba(240, 240, 224, 0.6); 
	padding:12px; 
	border-radius:10px; }
.div128 { position:relative; overflow:hidden; top: 0px; left: 0px; min-width:128px; width:128px; min-height:128px; height:128px; border:0; }
.div128x36 { position:relative; overflow:hidden; top: 0px; left: 0px; min-width:128px; width:128px; min-height:36px; height:36px; border:0; }
.div64 { position:relative; overflow:hidden; top: 0px; left: 0px; min-width:64px; width:64px; min-height:64px; height:64px; border:0; }
.div48 { position:relative; overflow:hidden; top: 0px; left: 0px; min-width:48px; width:48px; min-height:48px; height:48px; border:0; }
.div32 { position:relative; overflow:hidden; top: 0px; left: 0px; min-width:32px; width:32px; min-height:32px; height:32px; border:0; }
.div24 { position:relative; overflow:hidden; top: 0px; left: 0px; min-width:24px; width:24px; min-height:24px; height:24px; border:0; }
.img128 { position: absolute; width: 128px; height: 1396px; top: 0px; left: 0px }
#wifi { top: -130px }
#product { top: -512px }
#logo { top: -640px }
#router { top: -768px }
#tls { top: -496px }
#key { top: -1228px }
#key64 { top: -1035px }
#tls64 { top: -1035px; left: -64px }
#spanner { top: -1099px }
#lelogo { top: -1354px }
.progr { width:100%; height:32px;  background-color: rgba(240, 240, 24, 0.6); color:#c0c0c0; }
.progr-ok { width:100%; height:32px;  background-color: rgba(240, 240, 24, 1.0); color:#e0e060; }
.progr-fail { width:100%; height:32px;  background-color: rgba(240, 240, 24, 1.0); color:#c00000; }
.progr-done { width:100%; height:32px;  background-color: rgba(240, 240, 24, 1.0); color:#00c000; }
#preload-01 { background: url(spinner.gif) no-repeat -9999px -9999px; }

progress {background-color: #040; background: #040; color: #ed0 !important; }
progress::-webkit-progress-bar {background-color: #040; width:100%}
progress::-moz-progress-bar {background-color: #ed0 !important;}
progress::-webkit-progress-value {background-color: #ed0 !important;}

</style>
</head>

<body style="background-image:url(backdrop.jpg); background-repeat: no-repeat; background-size: cover;">

	<div id=waiting style="width: 54px; height:52px; margin: auto auto; text-align: center; position:absolute; top:50%; left:50%"><img src=spinner.gif></div>
	<div id=realpage style="opacity:0.3">
 <table class="center-div" style="width: 700px;">
  <tr><td class="td-center">
   <table width=100%>
    <tr><td valign=middle align=left>
     <a href="https://libwebsockets.org"><div class=div128>
      <img id=logo src="setup.png" class=img128>
     </div></a>
    </td><td class="bigt" align=left width=60%>&nbsp;&nbsp;Setup</td><td align=right>
   	 
	<table>
	 <tr>
	  <td id=conn_td style="margin:2px" align=right>
		<table id=conn_data >
			<tr><td class="itt">Joined&nbsp;AP:</td><td class="ivt" style="text-align:left"><span id=conn_ap></span></td></tr>
			  <tr><td class="itt">IP:</td><td class="ivt" style="text-align:left"><span id=conn_ip></span></td></tr>
			  <tr><td class="itt">Netmask:</td><td class="ivt" style="text-align:left"><span id=conn_mask></span></td></tr>
			  <tr><td class="itt">Gateway:</td><td class="ivt" style="text-align:left"><span id=conn_gw></span></td></tr>
			  <tr><td class="itt">Date:</td><td class="ivt" style="text-align:left"><span id=conn_time></span></td></tr>
		</table>
	  </td>
	  	  <td style="vertical-align: top" align=right><div class=div128><img id="inet" src="setup.png" class=img128 style="top: -381px; left: 0px" >
	  	<div class=div128 id=heart style="opacity:0"><img id=wifi class=img128 src="./setup.png"></div></div></td>
	 </tr>
        </table>
  </td></tr>
  <tr><td colspan=3>
   <section>
    <input type="radio" id="wireless" value="1" name="tractor" style="display:none" checked='checked' />
    <input type="radio" id="certs"    value="2" name="tractor" style="display:none" />  
    <input type="radio" id="settings" value="3" name="tractor" style="display:none" />    
    <input type="radio" id="updates"  value="4" name="tractor" style="display:none" />

    <nav>
     <label for="wireless"><table style="width:100%; display:inline; text-align:center">
     	<tr><td><div class=div128><img id=router class=img128 src="./setup.png"></div></td></tr></table></label>
     <label for="certs"><table style="width:100%; display:inline; text-align:center">
     	<tr><td><div class=div128><img id=tls class=img128 src="./setup.png"></div></td></tr></table></label>
     <label for="settings"><table style="width:100%; display:inline; text-align:center">
     	<tr><td><div class=div128><img id=spanner class=img128 src="./setup.png"></div></td></tr></table></label>
     <label for="updates"><table style="width:100%; display:inline; text-align:center">
     	<tr><td><div class=div128><img class=img128 src="./setup.png"></div></td></tr></table></label>
    </nav>

    <article class='page1'>

	<table class="center-div" style="width: 700px">
	 <tr><td  style="vertical-align:top;">
	    <table width=100% align=center><tr><td>
	       <table width=100% class="center-div" style="padding-top: 0px;" align=center>
	       		<tr><td class="tabtit">Configure Access Point Security</td></tr>
		       <tr><td align=center><div id=aps style="opacity:0.3">		       
			<table width=100%><tr><td class=l>Slot</td><td class=l width=70%>AP</td>
				<td class=l>Use</td><td class=l>Clear</td></tr>

				<tr class="ra" id="sltr0">
				<td align=center style="overflow:hidden;">
				<input type=radio name=slot id=slot0 value="0" onchange="slch(0);"> 1</input></td>
				<td width=50% id=slotap0><div id=selap0></div></td>
				<td id="use0"></td>
				<td><button disabled class="btn" id="clr0" style="font-size:8pt;"
					onclick="clr(0);">Clear</button></td></tr>
					
				<tr class="ra" id="sltr1">
				<td align=center style="overflow:hidden;">
				<input type=radio name=slot id=slot1 value="1" onchange="slch(1);"> 2</input></td>
				<td width=50% id=slotap1><div id=selap1></div></td>
				<td id="use1"></td>
				<td><button disabled class="btn" id="clr1" style="font-size:8pt;"
					onclick="clr(1);">Clear</button></td></tr>
					
				<tr class="ra" id="sltr2">
				<td align=center style="overflow:hidden;">
				<input type=radio name=slot id=slot2 value="2" onchange="slch(2);"> 3</input></td>
				<td width=50% id=slotap2><div id=selap2></div></td>
				<td id="use2"></td>
				<td><button disabled class="btn" id="clr2" style="font-size:8pt;"
					onclick="clr(2);">Clear</button></td></tr>
					
				<tr class="ra" id="sltr3">
				<td align=center style="overflow:hidden;">
				<input type=radio name=slot id=slot3 value="3" onchange="slch(3);"> 4</input></td>
				<td width=50% id=slotap3><div id=selap3></div></td>
				<td id="use3"></td>
				<td><button disabled class="btn" id="clr3" style="font-size:8pt;"
					onclick="clr(3);">Clear</button></td></tr>

				</table>
		       
		       </div></td></tr>
	       </table>
	     </td>
            </tr>
	     <tr><td align=center width=100%>
	      
	      <table id=scantable disabled style="table-layout:fixed; width:620px; word-break:break-all;border-spacing: 3px; padding: 3px;opacity: 0.35">
	      <tr class=rl>
	      	<td class=l style="overflow:hidden;width:24px;"></td>
			   <td class=l style="overflow:hidden;width:40%;">SSID</td>
			   <td class=l style="overflow:hidden;width:26px;">Ch</td>
			   <td class=l style="overflow:hidden;width:110px;">RSSI</td>
			   <td class=l style="overflow:hidden;width:30px;"></td>
			   <td class=l style="overflow:hidden;width:110px;">BSSID</td>
		</tr>
		
		<tr class="ra" id="rr0"><td id="sr00" align=center style="overflow:hidden;">
			<input id="apsel0" type=radio name=ap value="" onchange="rch(0);"></td>
			<td id="sr01" align=left style="overflow:hidden;"></td>
			<td id="sr02" align=center style="overflow:hidden;"></td>
			<td id="sr03" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr04" align=center style="overflow:hidden;"></td>
			<td id="sr05" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr1"><td id="sr10" align=center style="overflow:hidden;">
			<input id="apsel1" type=radio name=ap value="" onchange="rch(1);"></td>
			<td id="sr11" align=left style="overflow:hidden;"></td>
			<td id="sr12" align=center style="overflow:hidden;"></td>
			<td id="sr13" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr14" align=center style="overflow:hidden;"></td>
			<td id="sr15" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr2"><td id="sr20" align=center style="overflow:hidden;">
			<input id="apsel2" type=radio name=ap value="" onchange="rch(2);"></td>
			<td id="sr21" align=left style="overflow:hidden;"></td>
			<td id="sr22" align=center style="overflow:hidden;"></td>
			<td id="sr23" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr24" align=center style="overflow:hidden;"></td>
			<td id="sr25" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr3"><td id="sr30" align=center style="overflow:hidden;">
			<input id="apsel3" type=radio name=ap value="" onchange="rch(3);"></td>
			<td id="sr31" align=left style="overflow:hidden;"></td>
			<td id="sr32" align=center style="overflow:hidden;"></td>
			<td id="sr33" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr34" align=center style="overflow:hidden;"></td>
			<td id="sr35" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr4"><td id="sr40" align=center style="overflow:hidden;">
			<input id="apsel4" type=radio name=ap value="" onchange="rch(4);"></td>
			<td id="sr41" align=left style="overflow:hidden;"></td>
			<td id="sr42" align=center style="overflow:hidden;"></td>
			<td id="sr43" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr44" align=center style="overflow:hidden;"></td>
			<td id="sr45" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr5"><td id="sr50" align=center style="overflow:hidden;">
			<input id="apsel5" type=radio name=ap value="" onchange="rch(5);"></td>
			<td id="sr51" align=left style="overflow:hidden;"></td>
			<td id="sr52" align=center style="overflow:hidden;"></td>
			<td id="sr53" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr54" align=center style="overflow:hidden;"></td>
			<td id="sr55" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr6"><td id="sr60" align=center style="overflow:hidden;">
			<input id="apsel6" type=radio name=ap value="" onchange="rch(6);"></td>
			<td id="sr61" align=left style="overflow:hidden;"></td>
			<td id="sr62" align=center style="overflow:hidden;"></td>
			<td id="sr63" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr64" align=center style="overflow:hidden;"></td>
			<td id="sr65" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr7"><td id="sr70" align=center style="overflow:hidden;">
			<input id="apsel7" type=radio name=ap value="" onchange="rch(7);"></td>
			<td id="sr71" align=left style="overflow:hidden;"></td>
			<td id="sr72" align=center style="overflow:hidden;"></td>
			<td id="sr73" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr74" align=center style="overflow:hidden;"></td>
			<td id="sr75" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr8"><td id="sr80" align=center style="overflow:hidden;">
			<input id="apsel8" type=radio name=ap value="" onchange="rch(8);"></td>
			<td id="sr81" align=left style="overflow:hidden;"></td>
			<td id="sr82" align=center style="overflow:hidden;"></td>
			<td id="sr83" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr84" align=center style="overflow:hidden;"></td>
			<td id="sr85" align=center style="overflow:hidden;"></td></tr>
			
		<tr class="ra" id="rr9"><td id="sr90" align=center style="overflow:hidden;">
			<input id="apsel9" type=radio name=ap value="" onchange="rch(9);"></td>
			<td id="sr91" align=left style="overflow:hidden;"></td>
			<td id="sr92" align=center style="overflow:hidden;"></td>
			<td id="sr93" align=center style="overflow:hidden; font-size:7pt"></td>
			<td id="sr94" align=center style="overflow:hidden;"></td>
			<td id="sr95" align=center style="overflow:hidden;"></td></tr>

	      </table>
	     </td></tr>
	     <tr><td></td></tr>
	     	    <tr><td align=center style="font-size: 16pt" width=100%>
		<div id=scanlist style="opacity: 0.35; width:100%">
		 <span id=pwt style="color:#303000">Passphrase: </span>
		 <input disabled type="password" id="pw" oninput="pprch();" style="font-size: 18pt" size="18">
		 &nbsp;&nbsp;<input type=button class="btn" value="Update slot"
		 	disabled id=join onclick="do_join();">
			</div></td></tr>
	     
	</table></td></tr></table>
     </article>

    <article class='page2'>
        

	<table class="center-div" style="width: 700px">
	 <tr>
	  <td style="font-size: 12pt">
		<table class="center-div" style="padding:12px; ">
		
		<tr><td>
			<table align=left>
				<tr><td><div class=div128><img id=key class=img128 src="./setup.png"></div></td>
				<td valign=top style="padding:5px; left:5px">
					<table><tr><td class="tabtit">TLS Certificate</td></tr>
						<tr><td class="rivt">Issuer:</td><td class="riv"><span id=issuer></span></td></tr>
						<tr><td class="rivt">Subject:</td><td class="riv"><span id=subject></span></td></tr>
						<tr><td class="rivt">Days Valid:</td><td class="riv"><span id=validity></span></td></tr>
					</table></td></tr>
			</table></td></tr>

		<tr><td align=left><span class="tabtit">One-click Let's Encrypt&reg; Certificate Acquisition</span></td></tr>
		<tr><td class=scd>
		    <form><fieldset id=le_formset disabled style="opacity:0.3">
		    <table width=100% >
			<tr><td class="tabt">External DNS</td><td class="tabv" style="text-align:left">
		<input type=text id=le_dns name=le_dns maxlength=25 class=inp placeholder="Eg, xxx.mydomain.com" oninput="chle()"></input></td>
		<td rowspan=2><table><tr><td><div id=dns-icon class=div48><img id="dns_resolv\" src="setup.png" class=img128 style="top: -984px; left: 0px"></div>
		</td><td style="font-size:12pt">External :443 must be port-forwarded to this device :443</td></tr></table></td></tr>

		<tr><td class="tabt">Account email</td><td class="tabv" style="text-align:left">
		<input type=email id=le_email name=le_email maxlength=64 class=inp placeholder="Eg, me@mydomain.com" oninput="chle()"></input></td><td></td></tr>

		<tr><td colspan=3>
			<ol class="progress" data-steps="9">
			    <li id=leli1> <!--  li class none, "active", "fail", or "done" -->
			        <span class="name">Keys</span>
			        <span class="step"><span>1</span></span>
			    </li>
			    <li id=leli2>
			        <span class="name">Register</span>
			        <span class="step"><span>2</span></span>
			    </li>
			    <li id=leli3>
			        <span class="name">Auth</span>
			        <span class="step"><span>3</span></span>
			    </li>
			    <li id=leli4>
			        <span class="name">Chall</span>
			        <span class="step"><span>4</span></span>
			    </li>
			    <li id=leli5>
			        <span class="name">GenCSR</span>
			        <span class="step"><span>5</span></span>
			    </li>
			    <li id=leli6>
			        <span class="name">Request</span>
			        <span class="step"><span>6</span></span>
			    </li>
			    <li id=leli7>
			        <span class="name">Confirm</span>
			        <span class="step"><span>7</span></span>
			    </li>
			    <li id=leli8>
			        <span class="name">Issue</span>
			        <span class="step"><span>8</span></span>
			    </li>
			    <li id=leli9>
			        <span class="name">Done</span>
			        <span class="step"><span>9</span></span>
			    </li>
			</ol>
		</td></tr>
		<tr><td colspan=3 width=100% align=center><table><tr><td width=40%><span id=le_exp></span></td><td><button type="button" class="btn" id="getle" name="getle"
			onclick="get_le();" disabled> <div class=div128x36><img id=lelogo class=img128 src="./setup.png"></div> </button>
			</td><td width=40%><span id=le_info></span></td></tr></table>
		</td></tr>
		<tr><td colspan=3><table width=100%><tr><td align=left>
			<input type="checkbox" id="staging" checked>Staging</input></td><td align=right>
			<span style="font-size:6pt; color: rgba(0, 0, 0, 0.6)">Let's Encrypt&reg; is a trademark of the Internet Security Research Group. All rights reserved.</span>
		<a href="https://letsencrypt.org/" target="_blank">Let's Encrypt Site</a></td></tr></table>
		</td></tr>
		</table></fieldset></form></td></tr>
<tr><td align=left class="tabtit">Install Custom Certificate</td></tr>
<tr><td class=scd><table width=100%>
		<tr><td width=100%>
		<form name=multipart action="factory" method="post" enctype="multipart/form-data">;
		<table width=100%><tr><td align=left><div class=div64><img id=tls64 class=img128 src="./setup.png"></div></td><td class=scd style="text-align:left">
	
  <span style="font-size:14pt;"> PEM cert: </span>
  <input type="file" name="pub" id="pub" size="20" accept=".pem" style="font-size: 12pt"><br>
  <span id=file_info style="font-size:12pt;"></span></td></tr>
  
  <tr><td><div class=div64><img id=key64 class=img128 src="./setup.png"></div></td><td class=scd style="text-align:left">
  <span style="font-size:14pt;"> PEM key: </span>
  <input type="file" name="pri" id="pri" size="20" accept=".pem" style="font-size: 12pt"><br>
  	<span id=file_info style="font-size:12pt;"></span>


  		</td></tr><tr><td></td></tr><tr><td colspan=2>
	
  <input type="submit"  class="btn" id="upload" name="upload" value="Upload">
				</td></tr></table>
        			</form>
			</td></tr></table>
		</td></tr></table>
	</td></tr></table>

    </article>
     <article class='page3'>
        <form name=multipart action="factory" method="post" onsubmit="do_settings(this); return false">
	<fieldset id=settings_formset disabled style="opacity:0.3">
	<table class="center-div" style="width: 650px">
	 <tr><td class="tabtit">General Settings</td></tr>
	 <tr>
	  <td style="font-size: 12pt" class=scd>
		<table class="center-div" style="padding:12px; ">
			<tr><td class="tabt">Model</td><td class="tabv" style="text-align:left"><span id=model></span></td></tr>
			<tr><td class="tabt">Serial</td><td class="tabv" style="text-align:left">
  <input type=text id=serial name=serial size="8"  class=inp></input></td></tr>

			<tr><td class="tabt">Group:</td><td colspan=3 class="tabv">
  <input type="text" id="group" name=group maxlength=15  class=inp placeholder="Eg, myproject"></input></td></tr>
  
				<tr><td class="tabt">Role:</td><td colspan=3 class="tabv">
  <input type="text" id="role" name=role maxlength=15  class=inp placeholder="Eg, ttyS2"></input></td></tr>
					
<tr><td colspan=2><input type=submit class="btn" id="updsettings" name="updsettings" value="Update Settings"
				style="font-size: 14pt">
			</td></tr>
</table>
	</td></tr>
<tr><td></td></tr>
				<tr><td align=left>
				<input type=button class="btn" name="identify" value="ID Device"
				onclick="do_identify();" style="font-size: 14pt">&nbsp;
			<input type=button class="btn" name="identify" value="Reboot"
				onclick="do_reset();" style="font-size: 14pt">
			</td></tr>

				</table></fieldset>
        </form>
        
    </article>
 
          
     <article class="page4">

      <table class="center-div" style="width: 600px">
      <tr><td class="tabtit">Update device</td></tr>
       <tr><td align=center>
        <table>
         <tr><td colspan=2 class=stt width=100%>Application</td></tr>
         <tr><td><div id=img-ota-icon class=div64>
           <img id="img-ota-icon-img" src="setup.png" class=img128 style="top: -920px; left: -64px">
           </div></td>
           <td class=scc><div id=img-ota></div></td></tr>
           <tr><td colspan=2 align=center style="text-align:center"><div id=img-ota-upd></div></td></tr>
           <tr><td class=stt colspan=2 width=100%>Setup</td></tr>
           <tr><td><div id=img-factory-icon class=div64><img id="img-factory-icon-img" src="setup.png" class=img128 style="top: -920px; left: 0px"></div></td>
           <td class=scc><div id=img-factory></div></td></tr>
           <tr><td colspan=2 align=center style="text-align:center"><div id=img-factory-upd></div></td></tr>
         </table>
        </td></tr>

        <tr><td class=stt>Manual upload:</td></tr>
        <tr><td>
         <form name=multipart action="otaform" method="post" enctype="multipart/form-data" onsubmit="do_upload(this); return false;">
          <table width=100%>
          <tr><td colspan=2> </td></tr>
          <tr><td colspan=2><progress id=progr value=0 max=100 class=progr>Upload Progress</progress></td></tr>
          <tr><td colspan=2> </td></tr>
           <tr><td><input type="file" name="ota" id="ota" size="20" accept=".bin" onchange="file_change();" style="font-size: 12pt"></td>
               <td><span id=file_info style="font-size:12pt;"></span></td></tr>
               <tr><td colspan=2> </td></tr>
           <tr><td colspan=2>
            <input type="submit" class="btn" id="update" name="upload" disabled value="Upload">
            </td></tr>
           
         </table>
        </form>
       </td></tr>

      </table>
      
     </article>

    </section>
   </td></tr>
  </table>
 </td></tr>
</table>


<script>
var ws, sel, host, old, once = 0, jso, m;
var to = 0, set_int = 0;

document.getElementById("slot0").checked = false;
document.getElementById("slot1").checked = false;
document.getElementById("slot2").checked = false;
document.getElementById("slot3").checked = false;

for (m = 0; m < 10; m++)
	document.getElementById("apsel" + m).checked = false;

function san(s)
{
	if (!s)
		return "";
	if (s.search("<") != -1)
		return "invalid string";
	
	return s;
}

function image_summary(s)
{
	if (s.user)
		return san(s.app) + "<br>" + san(s.git) + "<br>" + san(s.user) +
			"@" + san(s.builder) + "<br>" + san(s.date);

	return "empty";
}

function get_appropriate_ws_url()
{
	var pcol;
	var u = document.URL;

	/*
	 * We open the websocket encrypted if this page came on an
	 * https:// url itself, otherwise unencrypted
	 */

	if (u.substring(0, 5) == "https") {
		pcol = "wss://";
		u = u.substr(8);
	} else {
		pcol = "ws://";
		if (u.substring(0, 4) == "http")
			u = u.substr(7);
	}

	u = u.split('/');

	/* + "/xxx" bit is for IE10 workaround */

	return pcol + u[0] + "/xxx";
}

	if (typeof MozWebSocket != "undefined")
		ws = new MozWebSocket(get_appropriate_ws_url(),
				      "esplws-scan");
	else
		ws = new WebSocket(get_appropriate_ws_url(),
				   "esplws-scan");

	try {
		ws.onopen = function() {
			document.getElementById("le_formset").disabled = 0;
			document.getElementById("le_formset").style.opacity = "1.0";
			document.getElementById("settings_formset").disabled = 0;
			document.getElementById("settings_formset").style.opacity = "1.0";
			document.getElementById("waiting").style.display = "none";
			console.log("waiting.style.display: " + document.getElementById("waiting").style.display);
			document.getElementById("realpage").style.opacity = "1.0";
			heartbeat();
		} 

		ws.onmessage =function got_packet(msg) {
			//document.getElementById("scan").innerHTML = "<pre>" + msg.data + "</pre>\n";
			var best, hit, n, m, s, b, a, cs;
			
			jso = JSON.parse(msg.data);
			heartbeat();
			cs = get_radio('ap');
		
			host = jso.host;
			if (once == 0) {
				document.getElementById("model").textContent = jso.model+"-"+jso.serial+"-"+jso.opts;
				document.getElementById("serial").value = jso.serial;
				document.getElementById("group").value = jso.group;
				document.getElementById("role").value = jso.role;
				
				document.getElementById("le_dns").value = jso.le_dns;
				document.getElementById("le_email").value = jso.le_email;

				if (jso.forced_button != 1)
					document.getElementById("access").innerHTML = "<span style=\"font-size:10pt;\">use physical button</span>";


				for (n = 0; n < 4; n++) {
				     if (jso.known[n])
				    	 document.getElementById("slotap" + parseInt(n)).textContent = jso.known[n].ssid;

					if (jso.known[n].ssid.length)
						document.getElementById("clr" + parseInt(n)).disabled = 0;
					document.getElementById("use" + parseInt(n)).textContent = jso.known[n].use;
				}

				document.getElementById("aps").style.opacity = "1.0";
				document.getElementById("group").value = jso.group;

				cs = jso.ssid;
				once = 1;
			}

			if (jso.auton) {

				document.getElementById("progr").value = parseInt(jso.pos / jso.len * 100);

				if (jso.pos == jso.len) {
					document.getElementById("realpage").style.display = "none";
					document.getElementById("waiting").style.display = "block";
					document.getElementById("progr").class = "progr-ok";
					setTimeout(function() { window.location.href = location.origin + "/"; }, 1000 );
				}

			} else {

			document.getElementById("img-factory").innerHTML = image_summary(jso.img_factory);
			document.getElementById("img-ota").innerHTML = image_summary(jso.img_ota);

			if (jso.latest.app && jso.latest.factory) {

				if (jso.latest.app && (!jso.img_ota.user || jso.img_ota.unixtime < jso.latest.app.unixtime)) {
					document.getElementById("img-ota-upd").innerHTML = "<table width=100%><tr><td width=49%></td><td align=center><div id=img-ota-upd-icon class=div48><img id=\"img-ota-upd-icon-img\" src=\"setup.png\" class=img128 style=\"top: -984px; left: 0px\"></div></td><td><button onclick=\"get_latest(0);\" style=\"font-size: 14pt\">Update&nbsp;to&nbsp;latest</button></td><td width=49%></td></tr></table>";
				} else {
					document.getElementById("img-ota-upd").innerHTML = "<table width=100%><tr><td width=49%></td><td align=center><div id=img-ota-upd-icon class=div48><img id=\"img-ota-upd-icon-img\" src=\"setup.png\" class=img128 style=\"top: -984px; left: -48px\"></div></td><td>Already latest</td><td width=49%></td></tr></table>";
				}

				if (jso.latest.factory && (!jso.img_factory.user || jso.img_factory.unixtime < jso.latest.factory.unixtime)) {
					document.getElementById("img-factory-upd").innerHTML = 
						"<table width=100%><tr><td width=49%></td><td align=center><div id=img-factory-upd-icon class=div48>"+
						"<img id=\"img-factory-upd-icon-img\" src=\"setup.png\" class=img128 style=\"top: -984px; left: 0px\"></div>"+
						"</td><td><button onclick=\"get_latest(1);\" style=\"font-size: 14pt\">Update&nbsp;to&nbsp;latest</button>"+
						"<br>(NB: Updating Setup erases Application)</td><td width=49%></td></tr></table>";
				} else {
					document.getElementById("img-factory-upd").innerHTML =
						"<table width=100%><tr><td width=49%></td><td align=center><div id=img-factory-upd-icon class=div48>"+
						"<img id=\"img-factory-upd-icon-img\" src=\"setup.png\" class=img128 style=\"top: -984px; left: -48px\">"+
						"</div></td><td>Already latest</td><td width=49%></td></tr></table>";
				}
			}
			
			if (jso.certissuer)
				document.getElementById("issuer").textContent = san(jso.certissuer);
			if (jso.certsubject)
				document.getElementById("subject").textContent = san(jso.certsubject);
			if (jso.certdays)
				if (jso.certdays == "0" && jso.certissuer == "" && jso.certsubject == "")
					document.getElementById("validity").textContent = "(Connect to AP for date)";
				else
					document.getElementById("validity").textContent = san(jso.certdays) + " days";
			
			if (jso.acme_state) {
				console.log("acme_state: " + parseInt(jso.acme_state) + ", acme_msg: " + jso.acme_msg);
				set_le_step(parseInt(jso.acme_state), jso.acme_msg);
			}

			if (jso.inet == 1) {
				var d = new Date(parseInt(jso.unixtime) * 1000);
				document.getElementById("inet").style.top = "-254px";
				document.getElementById("conn_td").class = "group2";
				document.getElementById("conn_data").style.display = "block";
				document.getElementById("conn_ap").textContent = san(jso.ssid);
				document.getElementById("conn_ip").textContent = san(jso.conn_ip);
				document.getElementById("conn_mask").textContent = san(jso.conn_mask);
				document.getElementById("conn_gw").textContent = san(jso.conn_gw);
				document.getElementById("conn_time").textContent = d.toDateString() + " " + san(jso.button);

			} else {
				document.getElementById("inet").style.top = "-382px";
				document.getElementById("conn_td").class = "";
				document.getElementById("conn_data").style.display = "none";
				document.getElementById("conn_ap").textContent = "";
				document.getElementById("conn_ip").textContent = "";
				document.getElementById("conn_mask").textContent = "";
				document.getElementById("conn_gw").textContent = "";
				document.getElementById("conn_time").textContent = "";
			}
			
			var tbldis = "";
			if (!get_radio('slot'))
				tbldis = "disabled style=\"opacity:0.3\"";

			s = "";
	
			for (m = 0; m < jso.aps.length; m++) {

				best = parseInt(jso.aps[m].rssi);

				b = 0;
				if (best > -90)
					b++;
				if (best > -85)
					b++;
				if (best > -80)
					b++;
				if (best > -75)
					b++;
				if (best > -70)
					b++;
				if (best > -65)
					b++;
				if (best > -60)
					b++;
				if (best > -55)
					b++;
		
				a= "";
				for (n = 0; n < 8; n++)
					if (n <= b)
						a = a + "&#x25C9;"; /* filled in */
					else
						a = a + "&#x25Ce;";
				var sel = false, ra = "ra";
				if (cs == san(jso.aps[m].ssid)) {
					sel = true;
					ra = "ras";
					rch(parseInt(m));
				}

				if (document.getElementById("rr" + parseInt(m))) {
					document.getElementById("rr" + parseInt(m)).className = ra;
					document.getElementById("apsel" + parseInt(m)).value = san(jso.aps[m].ssid);
					document.getElementById("apsel" + parseInt(m)).checked = sel;
					console.log(get_radio_index('slot') + " " + get_radio_index('ap'));
					if (!get_radio('slot'))
						document.getElementById("apsel" + parseInt(m)).disabled = 1;
					else
						document.getElementById("apsel" + parseInt(m)).disabled = 0;
					
					document.getElementById("sr" + parseInt(m) + "1").innerHTML = san(jso.aps[m].ssid);
					document.getElementById("sr" + parseInt(m) + "2").innerHTML = san(jso.aps[m].chan);
					document.getElementById("sr" + parseInt(m) + "3").innerHTML = a;
					document.getElementById("sr" + parseInt(m) + "4").innerHTML =
						"<div class=div24>"+
			        		"<img class=img128 src=\"./setup.png\" style=\"top: -896px; left:-" +
						24 * parseInt(jso.aps[m].auth) + "px\"></div>";
					
					document.getElementById("sr" + parseInt(m) + "5").innerHTML =
						"<span style=\"font-size:8pt\">" +
						san(jso.aps[m].bssid) + "</span>";
				}
			}
		
			if (get_radio('slot')) {
				document.getElementById("scantable").disabled = 0;
				document.getElementById("realpage").style.opacity = "1.0";
			}

			}				
		} 

		ws.onclose = function(){
			document.getElementById("waiting").style.display = "block";
			document.getElementById("realpage").style.opacity = "0.3";
			document.getElementById("le_formset").disabled = 1;
			document.getElementById("le_formset").style.opacity = "0.3";
			document.getElementById("settings_formset").disabled = 1;
			document.getElementById("settings_formset").style.opacity = "0.3";

		}
	} catch(exception) {
		alert('<p>Error' + exception);
	}

function slch(n)
{
	var q;

	document.getElementById("join").value = "Set slot " + parseInt(parseInt(get_radio('slot')) + 1);
	document.getElementById("scanlist").style.opacity = "1.0";
	document.getElementById('clr' + parseInt(n)).disabled = false;
	document.getElementById("scantable").disabled = false;
	document.getElementById("scantable").style.opacity = "1.0";
	document.getElementById('sltr' + parseInt(n)).className = "ras";
	for (q = 0; q < 4; q++)
		if (q != n)
			document.getElementById('sltr' + parseInt(q)).className = "ra";
	
	for (q = 0; q < 10; q++)
		if (!get_radio('slot'))
			document.getElementById("apsel" + parseInt(q)).disabled = 1;
		else
			document.getElementById("apsel" + parseInt(q)).disabled = 0;
}

function clr(n)
{
	var s = "{\"ssid" + parseInt(n) +"\":\"\",\"pw" + parseInt(n) + "\":\"\",\"slot\":\"" +
					parseInt(n) + "\"}";
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}
	s = "slotap" + n;
	if ( document.getElementById(s))
		document.getElementById(s).textContent = "";
	document.getElementById("clr" + parseInt(n)).disabled = true;
	document.getElementById("use" + parseInt(n)).textContent = "0";
}

function chgroup()
{
	var s = "{\"group\":\"" + document.getElementById("group").value + "\"}";
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}
}

function chrole()
{
	var s = "{\"role\":\"" + document.getElementById("role").value + "\"}";
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}
}

function get_radio(name)
{
	var s = document.getElementsByName(name), sel;
	for ( var i = 0; i < s.length; i++)
	    if (s[i].checked) {
	        sel = s[i].value;
	        break;
	    }

	return sel;
}

function get_radio_index(name)
{
	var s = document.getElementsByName(name), i;

	for (i = 0; i < s.length; i++)
	    if (s[i].checked)
	        return i;

	return -1;
}

function do_join()
{
	var s = "{\"ssid" + parseInt(get_radio('slot')) +"\":\"" + get_radio('ap') + "\",\"pw" +
		parseInt(get_radio('slot')) + "\":\"" +
			document.getElementById("pw").value + "\",\"slot\":\"" + parseInt(get_radio('slot')) + "\"}", h;
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}

//	alert("AP set to " + get_radio('ap'));
/*
	if (document.getElementById("serial").value)
		h = document.getElementById("model").textContent + "-" +
		    document.getElementById("serial").textContent;
	else
		h = host;
	
	document.getElementById('main').innerHTML =
		"Thanks, the device is now using the new settings.  " +
		"Please reconnect yourself to AP <b>" + get_radio() +
		"</b> and access the device at " +
		"<a href=\"https://" + host + "\">http://" + h + "</a>";
*/
}

function set_access_pw()
{
	var s = "{\"setting\":\"1\",\"access_pw\":\"" +
			document.getElementById("access_pw").value + "\"}", h;
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}
}


function do_identify()
{
	var s = "{\"identify\":\"1\"}";
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}
}

function do_reset()
{
	var s = "{\"reset\":\"1\"}";
	try {
		ws.send(s);
	} catch(exception) {
		alert('Sorry, there was a problem' + exception);
	}

	ws.close();
	alert("Rebooting...");
}

function file_change()
{
        document.getElementById('update').disabled = 0;
}

function reacquire()
{
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function(e) {
		if (xhr.readyState == 4) {
		    console.log("xhr response " + xhr.status);
		   if (xhr.status == 200) {
			   setTimeout(function() { window.location.href = location.origin + "/"; }, 200 );
		   } else {
		   	setTimeout(function() { reacquire(); }, 500 );
		   }
		}
	};

	// xhr.timeout = 5;
	xhr.open("GET", location.origin + "/", true);
	xhr.send();
}

function do_upload(f)
{
	var xhr = new XMLHttpRequest();

        document.getElementById('update').disabled = 1;
	//ws.close();
	document.getElementById("progr").class = "progr-ok";

	xhr.upload.addEventListener("progress", function(e) {
		document.getElementById("progr").value = parseInt(e.loaded / e.total * 100);

		if (e.loaded == e.total) {
		//	document.getElementById("realpage").style.display = "none";
		//	document.getElementById("waiting").style.display = "block";
		}
	
	}, false);

	xhr.onreadystatechange = function(e) {
		   console.log("rs" + xhr.readyState + " status " + xhr.status); 
		if (xhr.readyState == 4) {
			/* it completed, for good or for ill */
		//	document.getElementById("realpage").style.display = "none";
		//	document.getElementById("waiting").style.display = "block";
			document.getElementById("progr").class = "progr-ok";
			console.log("upload reached state 4: xhr status " + xhr.status);
			setTimeout(function() { window.location.href = location.origin + "/"; }, 9000 );
		}
	};

	/* kill the heart timer */
	clearInterval(set_int);

	xhr.open("POST", f.action, true);
	xhr.send(new FormData(f));

	return false;
}

function do_settings(f)
{
	var xhr = new XMLHttpRequest();

	xhr.onreadystatechange = function(e) {
		   console.log("do_settings" + xhr.readyState + " status " + xhr.status); 
		if (xhr.readyState == 4) {
			document.getElementById("updsettings").style.opacity = "1.0";
			document.getElementById("updsettings").disabled = 0;
		}
	};

	xhr.open("POST", f.action, true);
	document.getElementById("updsettings").style.opacity = "0.3";
	document.getElementById("updsettings").disabled = 1;
	xhr.send(new FormData(f));

	return false;
}

function get_latest(n)
{
	if (n == 0)
		ws.send("update-ota");
	else
		ws.send("update-factory");
}

function passphrase_disable(n)
{
	if (n == "")
		document.getElementById('pw').disabled = 0;
	else
		document.getElementById('pw').disabled = 1;
	if (n)
		document.getElementById('pwt').style.color = "#808080";
	else
		document.getElementById('pwt').style.color = "#000000";
}

function rch(mm)
{
	var q, m;
	var sel = get_radio('ap');
	var butok = 1;
	var need_pw = 0;
	

	m = mm;//get_radio_index('ap');

	if (sel == "")
		butok = 0;
	
	console.log("old " + old);

        if (old && old != "" && old != m)
	      document.getElementById("rr" + parseInt(old)).className = "ra";
	old = m;

	q = "slotap" + get_radio("slot");
	console.log("m = '" + m + "', q =" + q);
	if (document.getElementById(q))
		document.getElementById(q).textContent = sel;

	if (m >= 0) {
		if (document.getElementById("rr" + parseInt(m)))
			document.getElementById("rr" + parseInt(m)).className = "ras";
		
		console.log("get_radio_index " + m);
		if (m >= 0)
			need_pw = jso.aps[m].auth;
	}
	
	console.log("butok " + butok + "need_pw " + need_pw);

	passphrase_disable(!butok || need_pw == 0);

	if (need_pw != 0)
		if (!document.getElementById("pw").value)
			butok = 0;

	document.getElementById('join').disabled = !butok;
//	document.getElementById('scan').disabled = !butok;
}

function chle()
{
	if (document.getElementById("le_dns").value &&
	    document.getElementById("le_dns").value != "" &&
	    document.getElementById("le_email").value &&
	    document.getElementById("le_email").value != "")
		document.getElementById("getle").disabled = 0;
	else
		document.getElementById("getle").disabled = 1;
}

function get_le()
{
	var s = '{"job":"start-le","cn":"'+
		document.getElementById("le_dns").value +
		'","email":"' + document.getElementById("le_email").value +
		'","staging":"' + document.getElementById("staging").checked +
		'"}';

	document.getElementById("getle").disabled = 1;
	ws.send(s);
}

var le_last_non_failed = 0;

function set_le_step(st, info)
{
	var n, s = "", m = st;
	
	if (st == 2 || st == 3)
		document.getElementById("getle").disabled = 0;
	
	/* 3 = failed */
	if (st == 3)
		m = le_last_non_failed;
	else
		le_last_non_failed = st;

	if (m >= 4 /*LWS_CUS_CREATE_KEYS */ || m == 2) {
		if (m == 2)
			m = 9 + 3;	
		for (n = 1; n < m - 3; n++) {
			console.log("leli" + n + " to done");
			document.getElementById("leli" + n).className = "done";
		}
	
		if (st != 3) {
			console.log("leli" + (m - 3) + " to active");
			document.getElementById("leli" + (m - 3)).className = "active";
		} else {
			console.log("leli" + (m - 3) + " to fail");
			document.getElementById("leli" + (m - 3)).className = "fail";
		}
		
		for (n = m + 1 - 3; n < 10; n++)
			document.getElementById("leli" + n).className = "";
	}
	
	switch (st) {
	case 4: /* LWS_CUS_CREATE_KEYS */
		s = "Generating auth keys, please wait";
		break;
	case 5: /* LWS_CUS_REG */
		s = "Registering auth keys";
		break;
	case 6: /* LWS_CUS_AUTH */
		s = "Authenticating using auth keys";
		break;
	case 7: /* LWS_CUS_CHALLENGE */
		s = "Preparing challenge, this may take a few moments";
		break;
	case 8: /* LWS_CUS_CREATE_REQ */
		s = "Generating keys for CSR, this may take a few moments";
		break;
	case 9: /* LWS_CUS_REQ */
		s = "Requesting certificate signing";
		break;
	case 10: /* LWS_CUS_CONFIRM */
		s = "Undergoing challenge...";
		break;
	case 11: /* LWS_CUS_ISSUE */
		s = "Waiting for certificate issue";
		break;
	case 2: /* LWS_CUS_SUCCESS */
		s = "Completed successfully";
		break;
	case 3: /* LWS_CUS_FAILED */
		s = "Failed";
		break;
	}
	
	document.getElementById("le_exp").innerHTML = s;
	document.getElementById("le_info").innerHTML = info;
}

function heart_timer() {
	var s;
	
	s = Math.round((95 * to) / (40 * 10)) / 100;
	
	if (s < 0) {
		clearInterval(set_int);
		set_int = 0;
		
		ws.close();
		
		document.getElementById("realpage").style.opacity = "0.3";
	}
		
	
	to--;
	document.getElementById("heart").style.opacity = s;
}


function heartbeat()
{
	to = 40 * 10;
	if (!set_int) {
		set_int = setInterval(heart_timer, 100);
	}
		
}

</script>

</body>
</html>

